<template>
  <div class="common-tabs-wrapper">
    <el-tabs v-model="active" type="card">
      <el-tab-pane
        v-for="(item, index) in gxOption"
        :label="item.key_name"
        :name="item.key_value"
        :key="index"
        style="height:auto"
      >
        <!-- <component
          :ref="'pane' + item.key_value"
          :is="item.component"
        ></component> -->
       
      </el-tab-pane>
      <ClassA v-if="active==1"></ClassA>
      <ClassB v-if="active==2"></ClassB>
      <CommonParameter v-if="active==3"></CommonParameter>
      
    </el-tabs>
  </div>
</template>

<script>
import ClassA from './modules/ClassA.vue';
import ClassB from './modules/ClassB.vue';
import CommonParameter from './modules/CommonParameter.vue';
export default {
  components: { ClassA, ClassB, CommonParameter },
  data() {
    return {
      visible:true,
      active: '1',
      gxOption: [
        { key_value: '1', key_name: '甲班', component: 'ClassA' },
        { key_value: '2', key_name: '乙班', component: 'ClassB' },
        { key_value: '3', key_name: '品种公定参数', component: 'CommonParameter' }
      ]
    };
  },
  created() {
    
  },
  methods: {}
};
</script>

<style lang="scss" scope>
.common-tabs-wrapper {
  .full-calendar-header {
    top: 0;
    left: 0;
    .header-center {
      text-align: center;
      .title {
        margin: 0 15px;
        color: #252f41;
        font-size: 14px;
        font-weight: 500;
      }
      .prev-month,
      .next-month,
      .current-month {
        display: inline-block;
        width: 32px;
        height: 32px;
        color: #606d86;
        line-height: 32px;
        font-size: 14px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #cfd4d8;
        cursor: pointer;
      }
      .current-month {
        width: 52px;
        font-size: 12px;
        color: #606d86;
        margin-left: 10px;
      }
    }
  }
}
</style>
